<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$navigateBack"><view class="iconfont icon-zuojiantou"></view></view>
				<view class="kaoshi-head-m">个人设置</view>
			</view>
		</view>
		<uni-list>
			<view class="setting-tx">
				<uni-list-item title="头像"></uni-list-item>
				<view><img :src="userinfo.id  ? user_info.avatar  : static_media.img01" @tap="getFaceimg"/></view>
			</view>
			<view class="setting-nc">
				<uni-list-item title="昵称" show-badge="true" :badge-text="userinfo.nickname" @tap="show_modal = true"></uni-list-item>
			</view>
			<view  @tap="show_changepwd = true" hover-class="none">
				<uni-list-item title="修改密码"></uni-list-item>
			</view>
		</uni-list>
		<view class="tuichu" @tap="logout">退出登录</view>
		<view class="lz-modal" :class="{ 'lz-modal-show': show_modal }">
			<view class="lz-modal-dialog">
				<view class="lz-list">
					<view class="lz-list-header">
						<view>修改昵称</view>
						<view class="iconfont icon-cuo1" @tap="show_modal = false"></view>
					</view>
					<view class="lz-list-body">
						<view class="lz-list-item lz-list-item-middle">
							<view class="lz-list-line">
							  <view class="lz-list-content lz-text__align--l">
								  <input type="text" v-model="nickname" placeholder="请输入您的昵称"/>
							  </view>
							</view>
						</view>
						<button type="primary" class="primary" @tap="editUserInfo('nickname')">提交</button>
					</view>
				</view>
				<view class="lz-margin--b-md"></view>
			</view>
		</view>
		<view class="lz-modal" :class="{ 'lz-modal-show': show_changepwd }">
			<view class="lz-modal-dialog">
				<view class="lz-list">
					<view class="lz-list-header">
						<view>修改密码</view>
						<view class="iconfont icon-cuo1" @tap="show_changepwd = false"></view>
					</view>
					<view class="lz-list-body">
						<view class="lz-list-item lz-list-item-middle">
							<view class="lz-list-line">
								<view class="lz-list-content lz-text__align--l">
									<input type="text" password="true" v-model="password" placeholder="请输入您的密码，至少六位"/>
								</view>
							</view>
						</view>
						<button type="primary" class="primary" @tap="changePwd('nickname')">提交</button>
					</view>
				</view>
				<view class="lz-margin--b-md"></view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
export default {
	data() {
		return {
			user_info: [],
			show_modal: false,
			show_changepwd: false,
			nickname: '',
			avatar: '',
			password: '',

		};
	},
	onLoad(){
		this.get_user_info();
	},
	onShow() {
		this.nickname = this.userinfo.nickname
	},
	computed: {
    ...mapState(['subject', 'userinfo']),
		static_media() {
			return {
				img01: this.$myConfig.localMedia + '/static/img/logo.png',
				useravatar:this.$myConfig.interMedia + this.userinfo.avatar
			}
		}
	},
	components: { uniList, uniListItem },
	methods: {
		async get_user_info () {
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.userInfo,
				needLogin: true
			})
			if (res.code === 1) {
				this.user_info = res.msg
				// this.user_info.avatar=this.$myConfig.interMedia + this.user_info.avatar
			}
			//
		},
		async logout() {
			const valid = await this.$myUserLogin.logout();
			if (valid) {
				uni.navigateTo({
					url: '/pages/auth/index'
				});
			} else {
				uni.showToast({
					icon: 'none',
					title: '退出登录失败'
				});
			}
    },
	getFaceimg() {
		let that = this;
		uni.chooseImage({
			count: 6, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (chooseImageRes) {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: that.$myConfig.api + 'api/common/upload?token=' + that.userinfo.token, //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					header: {token: that.userinfo.token},
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						if (uploadFileRes) {
							let res = JSON.parse(uploadFileRes.data);
							that.avatar = res.data.url
							that.editUserInfo('avatar');
						}
					}
				});
			}
		});
	},
    //
		async changePwd(){
			if(this.password != '' && this.password!=undefined && this.password.length >=6){

			}else{
				this.$myUtils.$prompt.showToast({
					icon: 'none',
					title: '密码不符合要求'
				});
				return
			}
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.resetpwd,
				data: {
					newpassword:this.password
				},
				needLogin: true
			});
			if(res.code == 1){
				uni.showToast({
					icon: 'success',
					title: '密码修改成功'
				})
				setTimeout(function () {
					uni.reLaunch({
						url: '/pages/auth/login/index?form_type=0'
					});
				},1000)

			}
		},
		async bindLogin() {
			/**
			 * 下面简单模拟下服务端的处理
			 * 检测用户账号密码是否在已注册的用户列表中
			 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
			 */
			const data = {
				account: this.nickname,
				password: this.password
			};
			const valid = await this.$myUserLogin.login(data);
		},
    async editUserInfo(type) {
			let data={}
			if(type == 'nickname'){
				if(this.nickname != '' && this.nickname!=undefined){
					data['nickname'] = this.nickname
				}else{
					this.$myUtils.$prompt.showToast({
						icon: 'none',
						title: '昵称不能为空'
					});
					return
				}
			}else if(type == 'avatar'){
				data['avatar'] =this.avatar
			}
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.editUserInfo,
				data: data,
				needLogin: true
			});
			if (res.code == 1) {
				if(type == 'nickname'){
					this.$store.commit('setUserInfo', { userinfo: {...this.userinfo, nickname: this.nickname} });
					uni.showToast({
						icon: 'none',
						title: '修改成功'
					});
				}else if(type == 'avatar'){
					this.get_user_info();
					this.$store.commit('setUserInfo', {userinfo: {...this.userinfo, avatar: this.user_info.avatar}});
					uni.showToast({
						icon: 'success',
						title: '头像上传成功'
					})
				}

      }
      this.show_modal = false
    }
	}
};
</script>

<style>
page {
	background: #f6f7f9;
}
.nc {
	position: relative;
	margin-right: 36px;
	margin-top: 12px;
}
.setting-tx {
	position: relative;
}
.setting-tx img {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 21px;
	top: 7px;
	border-radius: 50%;
}
.lz-list-header{
	justify-content: space-between;
}
.tuichu {
	text-align: center;
	font-size: 16px;
	padding: 14px 0;
	color: #000;
	background: #fff;
	border-top: 12px solid #f6f7f9;
}
.lz-list-body{
	padding-bottom: 12px;
}
.lz-list-item .lz-list-line .lz-list-content{
	flex: 1;
	color: #000;
	font-size: 17px;
	line-height: 1.5;
	text-align: left;
	width: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-top: 7px;
	padding-bottom: 7px;
	margin: 0 18px 12px;
}
.lz-list-body::before {
	border-bottom: none;
}
.lz-list-body::before {
			  border-top:none;
		  }
.lz-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	opacity: 0;
	outline: 0;
	text-align: center;
	transform: scale(1.185);
	backface-visibility: hidden;
	perspective: 1000px;
	background: rgba(0,0,0,.4);
	transition: all .3s ease-in-out 0s;
	pointer-events: none;
}
.lz-modal .lz-modal-dialog {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	width: 340px;
	max-width: 100%;
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
}
.lz-modal::before {
	content: "\200B";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.lz-list-header{
	display: flex;
	flex-direction: row;
	width: 90%;
	margin: 0 auto;
	padding: 17px;
	align-items: center;
}
.primary {
	width: 92%;
	margin: 0 auto;
	background:#3c7bfc!important;
	color: #fff!important;
	border-radius:30px;
}
.lz-list-header .icon-cuo1{
	font-size: 17px;
	color: #9e9e9e;
}
.lz-modal.lz-modal-show {
	opacity: 1;
	transition-duration: .3s;
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}
</style>
